<template>
  <div class="three-person" style="margin: 10px">
    <div>
      <a-form>
        <a-row :gutter="24">
          <a-col :lg="6" :md="12" :sm="24">
            <a-form-item v-bind="formItemLayout" label="所属板块">
              <a-select allowClear v-model="queryParam.departmentID"
                @change="handleChange">
                <a-select-option v-for="(department, index) in departmentOptions" :key="index" :value="department.Id">
                  {{ department.DepartmentName }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :lg="12" :md="12" :sm="24">
            <a-form-item :style="{ float: 'right' }">
              <a-button style="margin-left: 14px;" @click="initData(queryParam)" type="primary">查询</a-button>
              <a-button type="primary" style="margin-left: 14px;" @click="exportXls(queryParam)">导出</a-button>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
      <!-- <SearchFom :area="'basic'" @onSearch="initData" @onSure="onSave" @exportXls="exportXls" :query="queryParam"
        @onSubmit="onSubmit" /> -->
    </div>
    <a-divider />

    <div style="font-size: 24px;text-align: center; font-weight: bold;">
      <h1>各镇(街道)小型零星工程监管网络表</h1>
    </div>
    <a-form>
      <!-- <a-row :gutter="24">
        <a-col :lg="6" :md="12" :sm="24">
          <a-form-item v-bind="formItemLayout" label="填报单位">
            <a-input v-model="queryParam.fillInUnit" allowClear />
          </a-form-item>
        </a-col>
        <a-col :lg="6" :md="12" :sm="24">
          <a-form-item v-bind="formItemLayout" label="填报人">
            <a-input v-model="queryParam.fillInUnitPerson" allowClear />
          </a-form-item>
        </a-col>
        <a-col :lg="6" :md="12" :sm="24">
          <a-form-item v-bind="formItemLayout" label="联系电话">
            <a-input v-model="queryParam.fillInUnitPhone" allowClear />
          </a-form-item>
        </a-col>
        <a-col :lg="6" :md="12" :sm="24">
          <a-form-item v-bind="formItemLayout" label="填报日期">
            <a-input v-model="queryParam.fillInUnitDate" allowClear placeholder="" />
          </a-form-item>
        </a-col>
      </a-row> -->
      <a-row>
        <a-descriptions bordered :size="'small'">
          <!-- 第一行 -->
          <a-descriptions-item label="第一责任人">
            <span>{{ queryParam.firstResponsiblePerson }}</span>
            <!-- <a-input v-model="queryParam.firstResponsiblePerson" allowClear placeholder="" /> -->
          </a-descriptions-item>
          <a-descriptions-item label="第一责任人手机">
            <span>{{ queryParam.firstResponsiblePersonPhone }}</span>
            <!-- <a-input v-model="queryParam.firstResponsiblePersonPhone" allowClear placeholder="" /> -->
          </a-descriptions-item>
          <a-descriptions-item label="第一责任人邮箱">
            <span>{{ queryParam.firstResponsiblePersonEmail }}</span>
            <!-- <a-input v-model="queryParam.firstResponsiblePersonEmail" allowClear placeholder="" /> -->
          </a-descriptions-item>

          <!-- 第二行 -->
          <a-descriptions-item label="直接责任人">
            <span>{{ queryParam.directResponsiblePerson }}</span>
            <!-- <a-input v-model="queryParam.directResponsiblePerson" allowClear placeholder="" /> -->
          </a-descriptions-item>
          <a-descriptions-item label="直接责任人手机">
            <span>{{ queryParam.directResponsiblePersonPhone }}</span>
            <!-- <a-input v-model="queryParam.directResponsiblePersonPhone" allowClear placeholder="" /> -->
          </a-descriptions-item>
          <a-descriptions-item label="直接责任人邮箱">
            <span>{{ queryParam.directResponsiblePersonEmail }}</span>
            <!-- <a-input v-model="queryParam.directResponsiblePersonEmail" allowClear placeholder="" /> -->
          </a-descriptions-item>

          <!-- 第三行 -->
          <a-descriptions-item label="镇（街道）管理机构名称" :span="3">
            <span>{{ queryParam.unitName }}</span>
            <!-- <a-input v-model="queryParam.unitName" allowClear placeholder="" /> -->
          </a-descriptions-item>

          <!-- 第四行 -->
          <a-descriptions-item label="镇（街道）管理机构负责人">
            <span>{{ queryParam.unitHead }}</span>
            <!-- <a-input v-model="queryParam.unitHead" allowClear placeholder="" /> -->
          </a-descriptions-item>
          <a-descriptions-item label="镇（街道）管理机构负责人手机号">
            <span>{{ queryParam.unitHeadPhone }}</span>
            <!-- <a-input v-model="queryParam.unitHeadPhone" allowClear placeholder="" /> -->
          </a-descriptions-item>
          <a-descriptions-item label="镇（街道）管理机构负责人邮箱">
            <span>{{ queryParam.unitHeadEmail }}</span>
            <!-- <a-input v-model="queryParam.unitHeadEmail" allowClear placeholder="" /> -->
          </a-descriptions-item>

          <!-- 第五行 -->
          <a-descriptions-item label="三员名单">
            <!-- <a-input v-model="queryParam.threePersons" allowClear placeholder="" /> -->
            <!-- <div v-for="(threePersons,index) in jsonParse(queryParam.threePersons)" :key="index">
              <span class="block">{{threePersons.PersonType}}</span>
              <span class="block">{{threePersons.TrueName}}</span>
              <span class="block label">联系方式(手机号码)</span> <span class="block">{{threePersons.Phone}} </span>
              <span class="block label">负责区域</span><span class="block">{{threePersons.Area}} </span>
            </div> -->
            <div>
              <a-descriptions v-for="(threePersons, index) in threePersons" :key="index" bordered :size="'small'">
                <a-descriptions-item :label="threePersons.PersonType">
                  <span>{{ threePersons.TrueName }}</span>
                </a-descriptions-item>
                <a-descriptions-item label="联系方式(手机号码)">
                  <span>{{ threePersons.Phone }}</span>
                </a-descriptions-item>
                <a-descriptions-item label="负责区域">
                  <span>{{ threePersons.Area }}</span>
                </a-descriptions-item>
              </a-descriptions>
            </div>
          </a-descriptions-item>
        </a-descriptions>

      </a-row>
      <a-row :gutter="24">
        <a-col :lg="24" :md="24" :sm="24">
          <a-form-item :style="{ float: 'right' }">
            <!-- <a-button type="primary" style="margin-left: 14px;" @click="onSave()">保存</a-button> -->
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </div>
</template>
<script>
import Vue from 'vue'
import { ACCESS_TOKEN } from '@/store/mutation-types'
import SearchFom from './modules/searchform.vue'
import { GetThreePersonByDepartmentID, SaveThreePerson, ExportThreePersonByDepartmentID, SubmitThreePerson } from '@/api/statistics'
import { GetAllChildDeptByParentID } from '@/api/project'
import { getDicList } from '@/api/dict'

const userInfo = Vue.ls.get(ACCESS_TOKEN) // DepartmentID
export default {
  components: { SearchFom },
  data() {
    return {
      userInfo,
      spinning: false,
      queryParam: {
        id: '',
        departmentID: '',
        year: '',
        month: '',
        fillInUnit: '',
        fillInUnitPerson: '',
        fillInUnitPhone: '',
        fillInUnitDate: '',
        firstResponsiblePerson: '',
        firstResponsiblePersonPhone: '',
        firstResponsiblePersonEmail: '',
        directResponsiblePerson: '',
        directResponsiblePersonPhone: '',
        directResponsiblePersonEmail: '',
        unitName: '',
        unitHead: '',
        unitHeadPhone: '',
        unitHeadEmail: '',
        threePersons: '',
        updateUserID: '',
        updateTime: '',
        isSubmit: ''
      },
      threePersons: [],
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 10 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 14 }
        }
      },
      thisYear: '',
      thisMonth: '',
      departmentOptions: []
    }
  },
  created() {
    GetAllChildDeptByParentID(1).then(res => {
      res.forEach(r => {
        if (r.Id === this.userInfo.DepartmentID) {
          // this.queryParam.departmentID = r.Id
          this.isDepartment = true
        }
      })
      this.departmentOptions = res
    })
  },
  methods: {
    initData(data) {
      this.spinning = true
      GetThreePersonByDepartmentID({ departmentID: data.departmentID })
        .then(res => {
          this.queryParam = res.data
          this.threePersons = this.jsonParse(this.queryParam.threePersons)
          this.queryParam = res.data
          this.queryParam.departmentID = data.departmentID
          this.queryParam.year = data.year
          this.queryParam.month = data.month
        })
        .finally(() => {
          this.spinning = false
        })
    },
    onSave() {
      SaveThreePerson(this.queryParam).then(() => {
        this.$message.success('保存成功!')
        const date = new Date()
        const param = {
          departmentID: this.userInfo.DepartmentID,
          year: date.getFullYear(),
          month: date.getMonth() + 1
        }
        this.initData(param)
      })
    },
    onSubmit() {
      if (this.queryParam.isSubmit) {
        this.$message.warning('不可重复上报!')
      } else {
        SubmitThreePerson({ tpID: this.queryParam.id }).then(() => {
          this.$message.success('保存成功!')
          const date = new Date()
          const param = {
            departmentID: this.userInfo.DepartmentID,
            year: date.getFullYear(),
            month: date.getMonth() + 1
          }
          this.initData(param)
        }).catch(err => this.$message.error(err))
      }
    },
    jsonParse(str) {
      const a = JSON.parse(str)
      return a
    },
    exportXls(data) {
      ExportThreePersonByDepartmentID({ departmentID: data.departmentID })
        .then(res => {
          const a = `${process.env.VUE_APP_API_BASE_URL}${res.data}`
          window.open(a)
        })
        .finally(() => {
          this.spinning = false
        })
    },
    handleChange(val, option) {
      this.queryParam.departmentID = val
    }
  }
}
</script>
<style lang="less">
.three-person {
  .ant-descriptions-item-label {
    width: 16.66%;
  }

  .ant-descriptions-item-content {
    width: 16.66%;
  }

  .ant-descriptions-row,
  .ant-descriptions-item-label,
  .ant-descriptions-item-content {
    border: .5px solid #273c73 !important;
  }
}
</style>
